component Handle inherits Rectangle {
    in property <string> text <=> txt.text;
    in property <brush> text_color: white;
    in property <bool> show: true;
    in property <length> font_size <=> txt.font_size;

    callback clicked <=> touch.clicked;

    states [
        not_show when !show: {
            img.rotation-angle: -90deg;
            img.y: txt.font_size / 2;
        }
    ]

    img:= Image {
        x: 10px;
        y: txt.font_size / 2 + 3px;
        source: @image-url("../icons/dropdown.svg");
        colorize: text_color;
        width: txt.font_size - 2px;

        animate rotation-angle,y {
             duration: 300ms;
        }
    }

    txt:= Text {
        x: img.width + 15px;
        color: text_color;
    }

    touch:= TouchArea {
        mouse-cursor: pointer;
    }
}

export component Collapse {
    in-out property <bool> show: false;
    in property <string> title: "collapse title";
    in property <length> title_size: 18px;
    in property <brush> title_color: white;

    private property <length> logic_height;

    width: 100%;

    animate height {
         duration: 300ms;
    }

    Rectangle {
        handle:= Handle {
            y: 0px;
            height: 30px;
            text: title;
            font_size: title_size;
            text_color: title_color;
            show: show;
            clicked => {
                show = !show;
                change_height();
            }
        }
        cont:= Rectangle {
            y: handle.height;
            height: 0;
            clip: true;

            init => {
                logic_height = root.height;
                change_height();
            }

            animate height {
                 duration: 300ms;
            }

            @children
        }
    }

    // change the length based on the show parameter
    function change_height() {
        if show {
            root.height = logic_height;
             cont.height = logic_height - handle.height;
            return;
        }

        root.height = handle.height;
        cont.height = 0;
    }
}